<template>
    <div align = "center">
        <el-container>
            <el-header>
                <el-input v-model="input" placeholder="请输入内容" clearable style="width: 30%"></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button type="warning" icon="el-icon-star-off" @click="dialogFormVisibleadd = true">添加</el-button>
            </el-header>
            <el-main>
                <el-table :data="goods" border style="width: 50%" >
                    <el-table-column  prop="id" label="ID" width="139" row-key>
                    </el-table-column>
                    <el-table-column prop="goodName" label="商品名称" width="120">
                    </el-table-column>
                    <el-table-column prop="goodsCount" label="商品数量" width="120">
                    </el-table-column>
                    <el-table-column prop="goodsPrice" label="商品价格" width="120">
                    </el-table-column>
                    <el-table-column prop="billStatus" label="商品状态" width="120">
                        <template slot-scope="scope">
                            {{scope.row.billStatus | billStatusfo}}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-share" circle @click="UpdateId(scope.row.id)"></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 修改Form表单-->
                <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="商品ID" :label-width="formLabelWidth">
                        <el-input v-model="form.id" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input v-model="form.goodName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" :label-width="formLabelWidth">
                        <el-input v-model="form.goodsCount"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" :label-width="formLabelWidth">
                        <el-input v-model="form.goodsPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态" :label-width="formLabelWidth">
                            <!-- <el-select v-model="form.billStatus" placeholder="请选择商品状态">
                                <el-option label="待处理" value="0"></el-option>
                                <el-option label="处理中" value="1"></el-option>
                                <el-option label="已处理" value="2"></el-option>
                            </el-select> -->
                            <el-select v-model="form.billStatus" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="Update()">修 改</el-button>
                </div>
                </el-dialog>

                <!--新增表单-->
                <el-dialog title="新增信息" :visible.sync="dialogFormVisibleadd">
                <el-form :model="formadd">
                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input v-model="formadd.goodName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" :label-width="formLabelWidth">
                        <el-input v-model="formadd.goodsCount"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" :label-width="formLabelWidth">
                        <el-input v-model="formadd.goodsPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="商品区域" :label-width="formLabelWidth">
                        <el-input v-model="formadd.goodsDistrict" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态" :label-width="formLabelWidth">
                            <el-select v-model="formadd.billStatus" placeholder="请选择商品状态">
                                <el-option label="待处理" value="0"></el-option>
                                <el-option label="处理中" value="1"></el-option>
                                <el-option label="已处理" value="2"></el-option>
                            </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleadd = false">取 消</el-button>
                    <el-button type="primary" @click="add()">新 增</el-button>
                </div>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
  
</template>

<script>
import axios from 'axios';
axios.defaults.headers.post['Content-Type']='application/json'
  export default {
      data(){
          return{
              goods:[],
              input:'',
              dialogFormVisible: false,
              dialogFormVisibleadd:false,
              form: {},
              formadd:{
                  goodName:'',
                  goodsCount:'',
                  goodsPrice:'',
                  billStatus:'',
                  goodsDistrict: this.$route.params.id
              },
              formLabelWidth: '120px',
              options: [{
                    value: 0,
                    label: '待处理'
                }, {
                    value: 1,
                    label: '处理中'
                }, {
                    value: 2,
                    label: '已处理'
                }]
              }
      },
      filters:{
          billStatusfo:function (params) {
              switch(params){
                  case 0:
                      return '待处理';
                  case 1:
                      return '处理中';
                  case 2:
                      return '已处理';
              }
          }
      },
      mounted(){
          const id = this.$route.params.id;
          //url需要写完整后端项目路径
          const url = '/Test/Goods/index/'+id;
          axios.get(url).then(response =>{
              const result = response.data;
              const goods = result;
              this.goods = goods;
          }).catch(erro =>{
              console.log(erro)
          })
      },
      methods:{
          UpdateId(id){
              //弹出修改框
              this.dialogFormVisible = true;
              const url = '/Test/Goods/selectUpdate/'+id;
              axios.get(url).then(response => {
                  const result = response.data;
                  const form = result;
                  this.form = form;
              }).catch(erro =>{
                  console.log(erro)
              })
          },
          //修改方法
          Update(){
              const url = '/Test/Goods/updateForm';
              axios.post(url,JSON.stringify(this.form)).then(response => {
                  const result = response.data;
                  const goods = result;
                  this.goods = goods
                  if(this.goods != null){
                      this.$message({
                          type:"success",
                          message:'修改成功！'
                      })
                  }
              }).catch(erro =>{
                  console.log(erro)
              })
              this.dialogFormVisible = false;
          },
          //新增方法
          add(){
              const url = '/Test/Goods/addForm';
              axios.post(url,JSON.stringify(this.formadd)).then(response =>{
                  const result = response.data;
                  const goods = result;
                  this.goods = goods;
                  if(this.goods !=null){
                      this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                  }
                  this.initAddForm();
              }).catch(erro =>{
                  console.log(erro)
              })
              this.dialogFormVisibleadd =false;
          },
          //初始化新增表单
          initAddForm(){
              this.formadd = {
                  goodName:'',
                  goodsCount:'',
                  goodsPrice:'',
                  billStatus:'',
                  goodsDistrict: this.$route.params.id
              }
          },
          //删除方法
          del(id) {
                const idd = this.$route.params.id;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    const url ='/Test/Goods/delForm/'+id+'/'+idd;
                    axios.post(url).then(response =>{
                        const result =response.data;
                        const goods = result;
                        this.goods =goods;
                    }).catch(erro =>{
                        console.log(erro)
                    })
                    
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                });
            },
      }
  }
</script>